<template>
  <div>
    <!--搜索-->
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="菜单名称">
        <el-input v-model="queryForm.menuName" placeholder="请输入菜单名称"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单名称">
        <el-select v-model="queryForm.parentId" placeholder="请选择上级菜单名称">
          <el-option label="超级菜单" value="0"></el-option>
          <el-option :key="oneMenu.menuId" :label="oneMenu.menuName" :value="oneMenu.menuId" v-for="oneMenu in oneMenuData"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="executeQuery()">查询</el-button>
        <el-button type="success" @click="toAdd()">增加</el-button>
      </el-form-item>
    </el-form>

    <!--表单-->
    <el-table :data="tableData" style="width: 100%">

      <el-table-column prop="menuId" label="菜单编号" width="180"></el-table-column>
      <el-table-column prop="menuName" label="菜单名称" width="180"></el-table-column>
      <el-table-column prop="parentId" label="上级菜单编号"></el-table-column>
      <el-table-column prop="parentName" label="上级菜单名称"></el-table-column>
      <el-table-column prop="menuUrl" label="访问地址" width="180"></el-table-column>
      <el-table-column prop="glyphicon" label="菜单图标" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="toEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="executeDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pageInfo.page"
                   :page-sizes="[5, 10, 15, 20]"
                   :page-size="pageInfo.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="pageInfo.totalNum">
    </el-pagination>

    <!--增加对话框-->
    <el-dialog title="增加" :visible.sync="addDialogFormVisible">
      <el-form :model="addForm">
        <el-form-item label="菜单编号" :label-width="formLabelWidth">
          <el-input v-model="addForm.menuId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
          <el-input v-model="addForm.menuName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-select v-model="addForm.parentId" placeholder="请选择上级菜单名称">
            <el-option label="超级菜单" value="0"></el-option>
            <el-option :key="oneMenu.menuId" :label="oneMenu.menuName" :value="oneMenu.menuId" v-for="oneMenu in oneMenuData"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="访问地址" :label-width="formLabelWidth">
          <el-input v-model="addForm.menuUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" :label-width="formLabelWidth">
          <el-input v-model="addForm.glyphicon" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="executeAdd()">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改对话框-->
    <el-dialog title="修改" :visible.sync="editDialogFormVisible">
      <el-form :model="editForm">
        <el-form-item label="菜单编号" :label-width="formLabelWidth">
          <el-input v-model="editForm.menuId" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
          <el-input v-model="editForm.menuName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-select v-model="editForm.parentId" placeholder="请选择上级菜单名称">
            <el-option label="超级菜单" :value="0"></el-option>
            <el-option :key="oneMenu.menuId" :label="oneMenu.menuName" :value="oneMenu.menuId" v-for="oneMenu in oneMenuData"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="访问地址" :label-width="formLabelWidth">
          <el-input v-model="editForm.menuUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" :label-width="formLabelWidth">
          <el-input v-model="editForm.glyphicon" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="executeEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  data() {
    return {
      queryForm: {
        menuName: '',
        parentId: '',
      },

      tableData: [],
      pageInfo: {
        page: 2,
        pageSize: 20,
        totalNum: 50,
      },

      oneMenuData:[],

      /*对话框*/
      addDialogFormVisible: false,
      addForm: {
        menuId: '',
        menuName: '',
        parentId: '',
        menuUrl: '',
        glyphicon: '',
      },

      editDialogFormVisible: false,
      editForm: {
        menuId: '',
        menuName: '',
        parentId: '',
        menuUrl: '',
        glyphicon: '',
        versionId:'',
      },

      formLabelWidth: '120px',
    }
  },
  methods: {
    toEdit(index, row) {
      this.editDialogFormVisible=true;
      var reqData="menuId="+row.menuId;
      this.queryByMenuId(reqData);
    },
    executeEdit(){
      this.editDialogFormVisible=false;
      this.operateCUD("/menu/edit",this.$qs.stringify(this.editForm));
    },
    queryByMenuId(reqData) {
      this.$axios.post("/menu/queryByMenuId", reqData)
          .then(resp => {
            this.editForm=resp.data.returnData;
      })
          .catch(error => {
            console.log(error);
          })
    },
    executeDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var reqData="menuId="+row.menuId;
        this.operateCUD("/menu/delete",reqData);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    operateCUD(reqUrl,reqData){
      this.$axios.get(reqUrl+"?"+reqData)
          .then(resp=>{
            if (resp.data.returnCode===2002){
              this.$message({
                showClose: true,
                message: resp.data.returnMsg,
                type: 'success'
              });
            }else if (resp.data.returnCode===4002){
              this.$message({
                showClose: true,
                message: resp.data.returnMsg,
                type: 'error'
              });
            };
            this.queryMenu(this.$qs.stringify(this.queryForm));
            this.queryOneMenu();
          })
          .catch(error=>{
            console.log(error)
          });
    },
    executeQuery() {
      var reqData=this.$qs.stringify(this.queryForm);
      this.queryMenu(reqData);
    },

    toAdd(){
      this.addDialogFormVisible=true;
      this.addForm={
        menuId: '',
        menuName: '',
        parentId: '',
        menuUrl: '',
        glyphicon: '',
      };
    },
    executeAdd(){
      this.addDialogFormVisible=false;
      var reqData=this.$qs.stringify(this.addForm);
      this.operateCUD("/menu/add",reqData);
    },
    handleSizeChange(val) {
      this.pageInfo.page=1;
      this.pageInfo.pageSize=val;
      var reqData=this.$qs.stringify(this.pageInfo)+"&"+this.$qs.stringify(this.queryForm);
      this.queryMenu(reqData);
    },
    handleCurrentChange(val) {
      this.pageInfo.page = val;
      var reqData=this.$qs.stringify(this.pageInfo)+"&"+this.$qs.stringify(this.queryForm);
      this.queryMenu(reqData);
    },
    queryMenu(reqData) {
      this.$axios.post("/menu/query", reqData).then(resp => {
        this.tableData = resp.data.returnData.menuList;
        this.pageInfo = resp.data.returnData.pageInfo;})
          .catch(error => {
        console.log(error);
      })
    },

    /*查询所有一级菜单数据*/
    queryOneMenu(){
      this.$axios.post("/menu/queryOneMenu","").then(resp => {
        this.oneMenuData = resp.data.returnData;})
          .catch(error => {
            console.log(error);
          })
    }
  },
  mounted() {
    this.queryMenu("");
    this.queryOneMenu();
  },
}
</script>
<style>
.el-main {
  line-height: 45px;
}
.el-select{
  width: 100%
}

</style>